<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile - DateBox Demos</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" /> 
	
	<!-- NOTE: Script load order is significant! -->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
	
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/demos/extras.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
	<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
	<script type="text/javascript">
		$('div').live('pagecreate', function() {
			prettyPrint()
		});
	</script>
	
</head>
<body>
<div data-role="page" id="timeIndex"> 
	<div data-role="header" data-position="fixed"> 
		<h1>jQueryMobile - DateBox</h1>
		<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
	</div>
	<div data-role="content">
		<div class="content-secondary"> 
			<div id="jqm-homeheader"> 
				<h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework :: DateBox" /></h1> 
				<p>A Date and Time Picker plugin for jQueryMobile</p> 
			</div> 
			
			<div class="scriptdemos sidebar"></div>
		</div>
		
		<div class="content-primary"> 
			<div data-role="collapsible-set" data-mini="true">
			
				<div data-role="collapsible" data-collapsed="false"> 
					<h2>Linked Inputs</h2>
					<p>These are all linked - it gives a general idea of how to accomplish it.</p>
					<div data-role="fieldcontain">
						<label for="link1">Start Time</label>
						<input name="link1" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link1" />
					</div>
					<div data-role="fieldcontain">
						<label for="link2">Duration</label>
						<input name="link2" type="text" data-role="datebox" data-options='{"mode": "durationbox", "defaultPickerValue":0}' id="link2" />
					</div>
					<div data-role="fieldcontain">
						<label for="link3">End Time</label>
						<input name="link3" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link3" />
					</div>
				
					<script type="text/javascript">
						function dooffset() { // This does the actual work.  if you wanted based on "now", startdate should be = new Date();
							var startdate = $('#link1').datebox('getTheDate'),
								offsetsec = $('#link2').datebox('getLastDur'),
								enddate = new Date(startdate.getFullYear(), startdate.getMonth(), startdate.getDate(), startdate.getHours(), startdate.getMinutes(), startdate.getSeconds(), 0);
							enddate.setSeconds(enddate.getSeconds() + offsetsec);
							$('#link3').datebox('setTheDate', enddate);
							$('#link3').trigger('datebox', {'method':'doset'});
						}
						$('#link1').live('change', function() {
							$('#link2').trigger('datebox', {'method':'doset'});
						});
						$('#link2').live('change', function() {
							dooffset();
						});
					</script>
					<a href="#sourceLINKDUR" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
                    <div data-role="popup" id="sourceLINKDUR" class="ui-content">	
					<strong>HTML</strong>
					<pre class="prettyprint">
&lt;div data-role="fieldcontain"&gt;
    &lt;label for="link1"&gt;Start Time&lt;/label&gt;
    &lt;input name="link1" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link1" /&gt;
&lt;/div&gt;
&lt;div data-role="fieldcontain"&gt;
    &lt;label for="link2"&gt;Duration&lt;/label&gt;
    &lt;input name="link2" type="text" data-role="datebox" data-options='{"mode": "durationbox", "defaultPickerValue":0}' id="link2" /&gt;
&lt;/div&gt;
&lt;div data-role="fieldcontain"&gt;
    &lt;label for="link3"&gt;End Time&lt;/label&gt;
    &lt;input name="link3" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link3" /&gt;
&lt;/div&gt;</pre>

					<strong>jQuery</strong>
					<pre class="prettyprint">
function dooffset() { // This does the actual work.  if you wanted based on "now", startdate should be = new Date();
  var startdate = $('#link1').datebox('getTheDate'),
    offsetsec = $('#link2').datebox('getLastDur'),
    enddate = new Date(startdate.getFullYear(), startdate.getMonth(), startdate.getDate(), startdate.getHours(), startdate.getMinutes(), startdate.getSeconds(), 0);

  enddate.setSeconds(enddate.getSeconds() + offsetsec);
  $('#link3').datebox('setTheDate', enddate);
  $('#link3').trigger('datebox', {'method':'doset'});
}
$('#link1').live('change', function() {
  $('#link2').trigger('datebox', {'method':'doset'});
});
$('#link2').live('change', function() {
  dooffset();
});</pre>
				</div>
				</div>
			</div>
		</div> 
		
	</div>
	<div data-role="footer" data-position="fixed">
	</div>
</div>
</html>
